<!--
* @description  : 32位喷码录入
* @descriptionDetail: 32位喷码录入
* @copyright    : 浙江烟草
* @author       : mc
* @create       : 2022-09-24 15:19:49
-->
<template>
  <view class="page">
    <!-- #ifdef H5-ONLY -->
    <theme-navbar :is-white="false" :title="navTitle" :custom-back="goBack" style="z-index: 99999">
      <view class="nav-right-icon">
        <u-icon name="plus-circle" color="#FFF" size="50" @tap="addInkjetCode"></u-icon>
      </view>
    </theme-navbar>
    <!-- #endif -->
		<!-- #ifdef H5-WECHAT || H5-EMP-->
		<fab-button :content="fContent" @fabtrigger="fabtrigger" />
		<!-- #endif -->
		<view class="content">
      <u-card
        margin="36rpx 28rpx"
        :head-style="headStyle"
        padding="16"
        :show-head="false"
        box-shadow="#e5e5e5 0px 0px 50px"
      >
        <view slot="body">
          <view class="mg-bt fs-16">
            <u-row :gutter="16">
              <u-col span="1" style="color:red">
                {{ newDataObj.indexOrder }}
              </u-col>
              <u-col span="9">
                品牌品规：{{ newDataObj.goodsName }}
              </u-col>
              <u-col span="2">
                <view style="width: 100%;text-align: right;">
                  <text>{{ formCount }}</text>/<text>{{ newDataObj.qty }}</text>
                </view>
              </u-col>
            </u-row>
          </view>
          <view class="line">
            <u-line color="#cccccc" />
          </view>
          <view>
            <view style="margin-bottom:56rpx">
              <u-form
                label-width="auto"
                :error-type="errorType"
                :label-style="lab_style"
                :rules="rules"
                ref="uForm"
              >
                <template v-for="(item, index) in form">
                  <view style="border-bottom: 1px solid #0599D7;" :key="index">
                    <u-form-item label="前16位喷码:" :border-bottom="false" prop="bf16bitcode" :target="item">
                      <view class="u-item">
                        <view class="u-input">
                          <u-input
                            placeholder="请输入喷码"
                            maxlength="16"
                            v-model="item.bf16bitcode"
                            @input="bfInCode($event,index)"
                          />
                        </view>
                        <view class="u-num">
                          {{ item.bfNewNum }}/16
                        </view>
                      </view>
                    </u-form-item>
                    <u-form-item label="后16位喷码:" prop="af16bitcode" :target="item">
                      <view class="u-item">
                        <view class="u-input">
                          <u-input
                            placeholder="请输入喷码"
                            maxlength="16"
                            v-model="item.af16bitcode"
                            @input="afInCode($event,index)"
                          />
                        </view>
                        <view class="u-num">
                          {{ item.afNewNum }}/16
                        </view>
                      </view>
                    </u-form-item>
                  </view>
                </template>
              </u-form>
            </view>
          </view>
        </view>
      </u-card>
    </view>
    <view>
    </view>
    <u-button class="flat-btn" type="primary" @click="saveGoodsInfo()">
      保存
    </u-button>
  </view>
</template>

<script>
	import caseService from "@/service/case/case.service";
	import fabButton from '@/components/uni-fab.vue';

	export default {
		components: {
			fabButton
		},
		data() {
			return {
				form: [{
					af16bitcode: "",
					bf16bitcode: "",
					afNewNum: "0",
					bfNewNum: "0",
				}, ],
				errorType: ['border-bottom', 'message', ],
				lab_style: {
					fontWeight: 500,
					color: this.$theme.u_main_color,
					fontSize: '.75rem',
				},
				headStyle: {
					margin: 0,
					padding: 0,
				},
				newDataObj: "",
				goodsDtlUuid: "",
				rules: {
					af16bitcode: [{
						len: 16,
						required: true,
						message: '前16位喷码必须是16位，请重新填写',
						trigger: ['blur', ],
					}, ],
					bf16bitcode: [{
						len: 16,
						required: true,
						message: '后16位喷码必须是16位，请重新填写',
						trigger: ['blur', ],
					}, ],
				},
				paramList: [],
				validList: [],
				fContent: [{
					iconPath: require('@/static/add.png'),
					selectedIconPath: require('@/static/add.png'),
					text: '新增',
					active: false,
				}],
			}
		},
		computed: {
			formCount() {
				return this.form.length;
			},
		},
		onLoad(opt) {
			this.newDataObj = this.getRouteParam();
			if (this.newDataObj) {
				this.goodsDtlUuid = this.newDataObj.goodsDtlUuid;
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		mounted() {
			this.init()
			this.setRightBtns()
		},
		methods: {
			init() {
				this.$modal.showLoading('加载中...');
				caseService.get32BitcodeListByCigar({
					goodsDtlUuid: this.newDataObj.goodsDtlUuid,
					caseUuid: this.newDataObj.caseUuid,
				}).then(res1 => {
					this.$modal.hideLoading();
					if (res1.success && !this.$u.test.isEmpty(res1.data)) {
						this.form = res1.data
						res1.data.map(item => {
							item.afNewNum = item.af16bitcode.split('').length
							item.bfNewNum = item.bf16bitcode.split('').length
						})
					}
				}).catch(e => {
					this.$modal.hideLoading();
				});
			},
			setRightBtns() {
				// 设置右侧标题
				// #ifdef H5-DINGDING
				this.$deviceApi.setRight("新增", () => {
					this.addInkjetCode();
					this.setRightBtns();
				}, true, true);
				// #endif
			},
			fabtrigger(btn) {
				if (btn.index == 0) {
					this.addInkjetCode();
				}
			},
			afInCode(e, index) {
				this.form[index].afNewNum = e.length
			},
			bfInCode(e, index) {
				this.form[index].bfNewNum = e.length
			},
			addInkjetCode() {
				if (this.newDataObj.qty == this.formCount) {
					this.$u.toast('不能添加,已达最大条数');
					return;
				}
				this.form.push({
					af16bitcode: "",
					bf16bitcode: "",
					afNewNum: "0",
					bfNewNum: "0",
				})
			},
			saveGoodsInfo() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.paramList = this.form.map((item, index) => {
							return {
								af16bitcode: item.af16bitcode,
								bf16bitcode: item.bf16bitcode,
								custName: "",
								custUuid: "",
								goodsDtlUuid: this.goodsDtlUuid,
								orderIndex: index + 1,
								qty: this.newDataObj.unitQty,
								qtyItem: item.qtyItem ? item.qtyItem : 1,
								sourceCity: "",
								sourceCounty: "",
								sourceProv: "",
								goodsName: this.newDataObj.goodsName,
							}
						})
						let caseUuid = this.newDataObj.caseUuid
						let caseType = 5
						caseService.saveInkjetCode(caseUuid, caseType, this.paramList).then(res => {
							this.$modal.hideLoading();
							if (res.success) {
								this.backPrev({
									paramKey: "refresh",
									param: true,
								});
							} else {
								this.$modal.alert(res.msg);
							}
						}).catch(err => {
							this.$modal.alert(err);
						})
					} else {
						console.log('验证失败');
					}
				});
			},
			getDicName(keyword, code) {
				return this.$u.dic.getDicNameByKeyCode(keyword, code);
			},
		},
	}
</script>

<style lang="scss" scoped>
	.nav-right-icon {
		margin-right: 15rpx;
	}

	.content {
		background-color: #fff;
		padding-bottom: 120rpx;
	}

	.u-item {
		position: relative;
	}

	.u-num {
		position: absolute;
		margin-top: -22px;
		margin-left: 215px;
		font-size: 7px;
	}


	.card-style {
		background-color: #f4f4f4;
	}

	.mg-bt {
		margin-bottom: 20rpx;
	}

	.fs-13 {
		font-size: 25rpx;
	}

	.color {
		color: #909399;
	}

	.fs-16 {
		font-size: 32rpx;
	}

	.line {
		// margin-bottom: 26rpx;
	}

	.flat-btn {
		position: fixed;
		bottom: 50rpx;
		margin: auto;
		left: 60rpx;
		right: 60rpx;
		z-index: 88;
	}
</style>
